$(function () {
  // 1.1 获取裁剪区域的 DOM 元素
  var $image = $("#image");

  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: ".img-preview",
  };

  // 1.3 创建裁剪区域
  $image.cropper(options);

  $("#btnChooseImage").on("click", function () {
    $("#file").click();
  });
  $("#file").on("change", function (e) {
    var fils = e.target.files;
    // 判断,有没有选择图片,如果没有选择提醒用户选择
    if (fils.length === 0) {
      return layer.msg("请选择照片！");
    }
    var file = e.target.files[0];

    var imgURL = URL.createObjectURL(file);
    // 3. 重新初始化裁剪区域
    $image
      .cropper("destroy") // 销毁旧的裁剪区域
      .attr("src", imgURL) // 重新设置图片路径
      .cropper(options); // 重新初始化裁剪区域
  });
//   给确定这个按钮建立点击事件
$("#btnUpload").on("click",function(){
    // 先拿到裁剪后的图片
    var dataURL = $image
    .cropper('getCroppedCanvas', {
      // 创建一个 Canvas 画布
      width: 100,
      height: 100
    })
    .toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
  // 2. 调用接口，把头像上传到服务器
  $.ajax({
      method:"POST",
      url:'/my/update/avatar',
      data:{
        avatar: dataURL
      },
      success: res=>{
          if(res.status!== 0){
            return layer.msg('更换头像失败！')
          }
          layer.msg('更换头像成功！')
          window.parent.getData() 
      }
  })
})
});
